<template>
	<w-layout showNavbar navTitle="VIP 每月福利" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="$u.route(`/pages/parse/parse?type=15&title=每月福利规则`)" class="">
				规则
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-box-7 px-50 pt-100 pb-60 fc" style="min-height: 1400rpx;">
					<template v-if="state.timestamp">
						<up-count-down
							:time="state.timestamp * 1000"
							format="DD:HH:mm:ss"
							autoStart
							millisecond
							@change="onChange"
							@finish="onFinish"
						>
							<view class="color fs-36">
								<text>仅剩</text><text class="mx-10">{{ timeData.days }}&nbsp;天 {{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}:{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes }}:{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</text>
							</view>
						</up-count-down>
					</template>
					<template v-else>
						<view class="color fs-36">
							<text>开始领取</text>
						</view>
					</template>
					
					<up-gap height="20"></up-gap>
					<scroll-view scroll-y="true" style="max-height: 1150rpx;">
						<view class="fr-ac mt-40 u-border-bottom pb-40" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
							<view class="" style="position: relative;">
								<cut-corner arrow="2">
									<image style="width: 250rpx;height: 250rpx;" :src="item.imgurl" mode="widthFix"></image>
								</cut-corner>
								<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
									<cut-corner :arrow="3" clipSize="12rpx">
									<view class="px-14 py-8 fs-20" style="background-color: var(--color);color: #002C33;">
										{{item.vip_title}}
									</view>
									</cut-corner>
								</view>
							</view>
							
							<view class="ml-35 fc">
								<view class="ellipsis-3" style="line-height: 1.6;">
									{{item.title}}
								</view>
								<view class="color mt-10 fs-24">
									参考价格: {{item.money}}
								</view>
								<view @click="get_receive_award(item)" v-if="item.is_receive != 0" :class="item.is_receive == 2? 'public-btn-4':'public-btn-4 op-50'" class="color mt-20 t-c py-15">
									{{ item.is_receive == 2? '立即领取':'已领取'}}
								</view>
							</view>
						</view>
					</scroll-view>
					<no-more :show="state.list.length == 0"></no-more>
				</view>
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		level_award,
		receive_award
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_level_award()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	function scrolltolower(){
		console.log('底部')
		
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showSign:false,
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		timestamp:null
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	async function get_level_award(){
		const res = await level_award({})
		state.last_limit = res.level_award.length
		state.list = res.level_award
		state.timestamp = res.timestamp
	}
	
	async function get_receive_award(item){
		const res = await receive_award({
			vip_level: item.qy_level
		})
		uni.$u.toast('领取成功！')
		initData()
		get_level_award()
	}
	
	
	// 使用 reactive 创建响应式对象  
	const timeData = ref({});  
	  
	// 定义 onChange 方法  
	const onChange = (e) => {  
		timeData.value = e;  
	};  
	const onFinish = (e)=>{
		initData()
		get_level_award()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>